/**
 * Modal store for managing modal state
 *
 * Usage:
 * import { openModal, closeModal } from '../stores/modal';
 *
 * openModal({
 *   title: 'Edit Project',
 *   content: MyFormComponent,
 *   props: { projectId: 123 },
 *   onConfirm: handleSave
 * });
 */

import { writable } from 'svelte/store';

export const modalStore = writable({
  isOpen: false,
  title: '',
  size: 'medium',
  content: null,
  props: {},
  confirmText: 'Confirm',
  cancelText: 'Cancel',
  confirmVariant: 'primary',
  closeOnBackdrop: true,
  showCancel: true,
  showConfirm: true,
  onConfirm: null,
  onCancel: null,
});

/**
 * Open a modal
 * @param {object} config - Modal configuration
 * @param {string} config.title - Modal title
 * @param {'small'|'medium'|'large'} [config.size='medium'] - Modal size
 * @param {*} [config.content] - Svelte component or HTML content
 * @param {object} [config.props={}] - Props to pass to content component
 * @param {string} [config.confirmText='Confirm'] - Confirm button text
 * @param {string} [config.cancelText='Cancel'] - Cancel button text
 * @param {'primary'|'danger'|'success'} [config.confirmVariant='primary'] - Confirm button variant
 * @param {boolean} [config.closeOnBackdrop=true] - Close modal when clicking backdrop
 * @param {boolean} [config.showCancel=true] - Show cancel button
 * @param {boolean} [config.showConfirm=true] - Show confirm button
 * @param {Function} [config.onConfirm] - Confirm callback
 * @param {Function} [config.onCancel] - Cancel callback
 */
export function openModal(config) {
  modalStore.set({
    isOpen: true,
    title: '',
    size: 'medium',
    content: null,
    props: {},
    confirmText: 'Confirm',
    cancelText: 'Cancel',
    confirmVariant: 'primary',
    closeOnBackdrop: true,
    showCancel: true,
    showConfirm: true,
    onConfirm: null,
    onCancel: null,
    ...config,
  });
}

/**
 * Close the modal
 */
export function closeModal() {
  modalStore.update((state) => ({ ...state, isOpen: false }));
}
